<%- include('../layout') %>

<% contentFor('body') { %>
<% currentPath = '/categories' %>
<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2>分类管理</h2>
    <a href="/admin/categories/add" class="btn btn-success">
      <i class="fa fa-plus"></i> 添加分类
    </a>
  </div>
  
  <!-- 分类列表 -->
  <div class="card">
    <div class="card-body">
      <% if (categories.length > 0) { %>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>ID</th>
            <th>图标</th>
            <th>分类名称</th>
            <th>颜色</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <% categories.forEach(category => { %>
          <tr>
            <td><%= category.id %></td>
            <td>
              <% if (category.icon) { %>
              <i class="fa <%= category.icon %> fa-lg" style="color: <%= category.color %>;"></i>
              <% } else { %>
              <span class="badge" style="background-color: <%= category.color %>; min-width: 20px; height: 20px;"></span>
              <% } %>
            </td>
            <td><span style="color: <%= category.color %>;"><%= category.name %></span></td>
            <td>
              <span class="badge" style="background-color: <%= category.color %>;"><%= category.color %></span>
            </td>
            <td><%= new Date(category.createdAt).toLocaleString() %></td>
            <td>
              <div class="btn-group">
                <a href="/admin/categories/edit/<%= category.id %>" class="btn btn-sm btn-primary">编辑</a>
                <a href="/admin/categories/delete/<%= category.id %>" class="btn btn-sm btn-danger" onclick="return confirm('确定要删除该分类吗？删除前请确保该分类下没有动物。')">删除</a>
              </div>
            </td>
          </tr>
          <% }); %>
        </tbody>
      </table>
      <% } else { %>
      <p class="text-center text-muted">暂无分类数据</p>
      <% } %>
    </div>
  </div>
</div>
<% } %>